<template>
    <div class="ad web-inner">
        <div class="form">
            <div class="form-title">
                機會不等人，即可入駐。
            </div>
            <div class="form-main">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                    <el-form-item label="營業類型" prop="brand_category_id">
                        <el-checkbox-group v-model="ruleForm.brand_category_id">
                            <el-checkbox v-for="(item,index) in type" :label="item.title" name="type" :key="index">{{item.title}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="品牌名稱" prop="brand_name">
                        <el-input v-model="ruleForm.brand_name"></el-input>
                    </el-form-item>
                    <el-form-item label="加盟金額" prop="brand_budget" >
                        <div style="display: flex;flex-direction: row">
                            <el-input style="width: 200px;" v-model="ruleForm.brand_budget" type="number"></el-input><span>萬</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="聯絡姓名" prop="contact_name">
                        <el-input v-model="ruleForm.contact_name"></el-input>
                    </el-form-item>
                    <el-form-item label="聯絡電話" prop="contact_tel">
                        <el-input v-model="ruleForm.contact_tel"></el-input>
                    </el-form-item>
                    <el-form-item label="LINE ID" prop="">
                        <el-input v-model="ruleForm.line_id"></el-input>
                    </el-form-item>
                    <el-form-item label="微信 ID" prop="">
                        <el-input v-model="ruleForm.weichat_id"></el-input>
                    </el-form-item>
                    <el-form-item label="電子郵箱" prop="email">
                        <el-input v-model="ruleForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="總部所在地區" prop="HQ">
                        <el-select v-model="ruleForm.HQ">
                            <el-option :label="item.name" :value="item.name" v-for="(item,index) in area" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="聯絡時間" prop="open_time">
                        <el-radio-group v-model="ruleForm.open_time">
                            <el-radio label="早上9:00~12:00"></el-radio>
                            <el-radio label="下午12:00~18:00"></el-radio>
                            <el-radio label="晚上18:00~22:00"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="刊登說明 " prop="desc">
                        <el-input type="textarea" v-model="ruleForm.desc" placeholder="填寫詳細需求說明，會更得到加盟總部的青睞哦！"></el-input>
                    </el-form-item>
                    <el-form-item label="額外服務需求" prop="ext_need">
                        <el-checkbox-group v-model="ruleForm.ext_need">
                            <el-checkbox v-for="(item,index) in type1" :label="item.title" name="type" :key="index">{{item.title}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="驗證碼" prop="phrase">
                        <img  style="height: 40px;vertical-align: middle;cursor: pointer" :src="imgUrl" alt="">

                        <el-input style="display: inline-block;width: 200px;margin: 10px;" v-model="ruleForm.phrase"/>
                        <a @click="refresh" href="javascript:;">看不清？點擊刷新</a>
                    </el-form-item>
                    <el-form-item label="" prop="open_info">
                        <el-checkbox v-model="ruleForm.open_info"  name="type">我同意，已仔細閱讀并明了[<span style="color: blue"><a
                                href="#/service">服務條款</a></span>]，[<span style="color: blue"><a href="#/privacy">隱私政策</a></span>]，自同意該等規定，并願意遵守網站今、後的規範。</el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">送出</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import qs from 'qs';
    export default {
        name: "ad",
        props:{
            brand_id:{
                type:String,
                default:() =>{
                    return ""
                 }
            }
        },
        data() {
            var checkPhone = (rule, value, callback) => {
                let mobilePatternTW = /^(\+886\s)?[0]{1}[9]{1}\d{8}$/;
                if(mobilePatternTW.test(value)){
                    callback();
                }else{
                    callback(new Error('請輸入正確的電話號碼'));
                }
            };
            var check = (rule, value, callback) => {
                if(value){
                    callback();
                }else{
                    callback(new Error('請同意條款'));
                }
            };
            return {
                ruleForm: {
                    brand_category_id: [],
                    brand_name: '',
                    brand_budget: '',
                    contact_name: '',
                    contact_tel: '',
                    line_id:'',
                    weichat_id:'',
                    email:'',
                    HQ:'',
                    open_time:'',
                    desc:'',
                    ext_need:[],
                    phrase:"",
                    open_info:false
                },
                rules: {
                    brand_category_id: [
                        { required: true, message: '必填', trigger: 'change' },
                    ],
                    brand_name: [
                        { required: true, message: '必填', trigger: 'blur' }
                    ],
                    brand_budget: [
                        { required: true, message: '必填', trigger: 'blur' }
                    ],
                    contact_name: [
                        { required: true, message: '必填', trigger: 'blur' }
                    ],
                    contact_tel: [
                        { required: true,message: '必填',validator:checkPhone, trigger: 'blur' }
                    ],
                    HQ: [
                        { required: true, message: '必填',trigger: 'change' }
                    ],
                    open_time: [
                        { required: true,message: '必填', trigger: 'change' }
                    ],
                    open_info: [
                        { validator:check, trigger: 'change' }
                    ],
                    phrase: [
                        { equired: true, message: '必填', trigger: 'blur' }
                    ],
                },
                type:[],
                type1:[
                    {
                        title:"企業品牌識別設計"
                    },
                    {
                        title:"空間規劃設計"
                    },
                    {
                        title:"連鎖加盟系統"
                    },
                    {
                        title:"連鎖顧問輔導"
                    },
                    {
                        title:"連鎖課程咨詢"
                    },
                    {
                        title:"創業輔導"
                    },
                    {
                        title:"國際代理推廣"
                    },
                    {
                        title:"展店服務"
                    },
                    {
                        title:"產品研發教學"
                    },
                    {
                        title:"市場行銷規劃"
                    },
                    {
                        title:"吉祥物設計"
                    },
                    {
                        title:"包裝設計"
                    },
                    {
                        title:"網頁設計"
                    },
                    {
                        title:"媒體宣傳"
                    },
                ],
                options: [
                    {
                        label: '10萬以下'
                    },
                    {
                        label: '10萬~20萬'
                    }, {
                        label: '20萬~50萬'
                    }, {
                        label: '50萬~100萬'
                    }, {
                        label: '100萬以上'
                    }
                ],
                imgUrl:"/webroot/session.php",
            }
        },
        mounted() {
            this.getBrandCategory()
        },
        methods: {
            submitForm(formName) {
                let obj= [
                    {
                        name:"brand_category_id",
                        text:"請選擇營業類型!"
                    },
                    {
                        name:"brand_name",
                        text:"請輸入品牌名稱!"
                    },
                    {
                        name:"brand_budget",
                        text:"請輸入加盟金額!"
                    },
                    {
                        name:"contact_name",
                        text:"請輸入聯絡姓名!"
                    },
                    {
                        name:"contact_tel",
                        text:"請輸入聯絡電話!"
                    },
                    {
                        name:"HQ",
                        text:"請選擇總部所在地區!"
                    },
                    {
                        name:"open_time",
                        text:"請選擇聯絡時間!"
                    },
                    {
                        name:"open_info",
                        text:"請同意條款!"
                    }
                ]
                let temp = {};
                for(let i=0;i<obj.length;i++){
                    let tmp = obj[i];
                    if(typeof this.ruleForm[tmp.name]==='object'){
                        if(this.ruleForm[tmp.name].length<=0){
                            temp = tmp;
                            this.$alert(temp.text, '提示', {
                                confirmButtonText: '确定',
                            });
                            return false
                        }
                    }else if(typeof this.ruleForm[tmp.name]==='boolean'){
                        if(this.ruleForm[tmp.name]===false){
                            temp = tmp;
                            this.$alert(temp.text, '提示', {
                                confirmButtonText: '确定',
                            });
                            return false
                        }
                    }else{
                        if(this.ruleForm[tmp.name]===""){
                            temp = tmp;
                            this.$alert(temp.text, '提示', {
                                confirmButtonText: '确定',
                            });
                            return false
                        }
                    }
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.sendData()
                    } else {
                        console.log('error submit!!');
                return false;
            }
            });
            },
            refresh() {
                this.imgUrl="/webroot/session.php?"+new Date().getTime()
            },
            sendData() {
                let data = Object.assign({},this.ruleForm);
                data.brand_category_id = data.brand_category_id.join(",");
                data.ext_need = data.ext_need.join(",");
                data.brand_id = this.brand_id;
                this.$http({
                    method:"post",
                    url:this.API.apply_ad,
                    data:qs.stringify(data),
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    withCredentials:true
                }).then((res) => {
                    this.refresh()
                  if(res.data[0].code==="101"){
                    this.resetForm("ruleForm");
                    this.$alert(this.formTips, '成功', {
                      confirmButtonText: '确定',
                    });
                  }else{
                    this.$alert(res.data[1].desc, '提示', {
                      confirmButtonText: '确定',
                    });
                  }
            })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            getBrandCategory() {
                this.$http.post(this.API.get_brand_category).then((res) => {
                    let $this = this;
                if(res.status ===200 && res.data.length>0){
                    this.type = res.data;
                }
            })
            },
        }
    }
</script>

<style scoped lang="less">
    @import "../style/base";
    .ad {
        margin: 0 auto;
        padding: 40px 0;
        .bg {
            display: inline-block;
            width: 100%;
            margin-bottom: 50px;
            img {
                width: 100%;
            }
        }
        .form {
            .form-title {
                font-size: 38px;
                margin-bottom: 50px;
                color: #606266;
            }
        }
    }

</style>